<template>
	<div class="login-page">
		<div class="login">
			<div class="title">登 录</div>
			<div class="form">
				<u-input class="username" v-model="params.name" type="text" :custom-style="inputStyle" placeholder="请输入用户名" />
				<u-input class="password" v-model="password" type="password" :custom-style="inputStyle" placeholder="请输入密码" />
				<div class="flex">
					<u-input class="code" v-model="params.captcha" type="text" :custom-style="inputStyle" placeholder="请输入验证码" />
					<u-image width="200rpx" height="80rpx" :src="codeImg" @click="getCode"></u-image>
				</div>
				<u-button type="primary" :loading="loading" :custom-style="btnStyle" @click="login">登录</u-button>
			</div>
		</div>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import md5Libs from "uview-ui/libs/function/md5";
import {
	getLoginCode,
	userLogin,
	getUserInfo,
	userStatistics
} from "../../api/user.js";

export default {
	data() {
		return {
			params: {
				name: "",
				captcha: "",
				captcha_key: ""
			},
			password: "",
			codeImg: "",
			inputStyle: {
				fontSize: "38rpx"
			},
			btnStyle: {
				height: "90rpx"
			},
			loading: false
		}
	},
	onLoad() {
		this.getCode();
	},
	onShow() {
		if(!!uni.getStorageSync("account")){
			let { name, password } = uni.getStorageSync("account");
			this.params.name = name;
			this.password = password;
		}
		
		if(!!uni.getStorageSync("token")){
			uni.redirectTo({
				url: "/pages/index/index",
			});
		}
	},
	methods: {
		createRandomStr(lenght) {
			let str = '';
			while (lenght-- > 0) {
					let num = Math.floor(Math.random() * 26);
					str += String.fromCharCode(num + 97);
			}
			return str;
		},
		getCode() {
			getLoginCode().then(({data})=>{
				this.codeImg = data.captcha_image_content;
				this.params.captcha_key = data.captcha_key;
			});
		},
		async login() {
			this.loading = true;
			let loginRes = await userLogin(this.params,{verify: md5Libs.md5(this.password)});
			if(loginRes.code == 200){
				uni.setStorageSync("account", {name: this.params.name, password: this.password});
				uni.setStorageSync("token", loginRes.data.token);
				uni.setStorageSync("key", loginRes.data.key);
				uni.setStorageSync("own", loginRes.data.own);
				uni.setStorageSync("_key", this.createRandomStr(16));
				uni.setStorageSync("_iv", this.createRandomStr(16));
				
				let userRes = await getUserInfo();
				uni.setStorageSync("userInfo", userRes.data);
				this.loading = false;
				this.$refs.uToast.show({
					title: "登录成功",
					type: "success",
					callback: ()=>{
						this.$store.state.isLogin = true;
						userStatistics().then(({code, data})=>{
							if(code == 200){
								uni.setStorageSync("usage", data);
								uni.reLaunch({
									url: "/pages/index/index",
									success: ()=>{
										console.log(123)
										uni.$navBarRefresh();
									}
								});
							}
						});
					}
				});
			}else{
				this.getCode();
				this.loading = false;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.login-page{
	overflow: hidden;
}
.login{
	width: 80%;
	margin: auto;
	margin-top: 150rpx;
}
.title{
	text-align: center;
	font-size: 68rpx;
	font-weight: bold;
	color: #1E62FC;
}
.form{
	margin-top: 180rpx;
}
.username, .password{
	margin-bottom: 50rpx;
	border-bottom: 1rpx solid #E5E5E5;
}
.flex{
	align-items: flex-end;
	margin-bottom: 100rpx;
}
.code{
	flex: 1;
	border-bottom: 1rpx solid #E5E5E5;
	margin-right: 10rpx;
}
</style>
